<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item
      v-for="item in tabs"
      :key="item.path"
      >{{ $t(`menus.${item.meta.chang}`) }}</el-breadcrumb-item
    >
  </el-breadcrumb>
</template>

<script setup lang='ts'>
import { RouteLocationMatched,useRoute } from "vue-router";
import { ref, watch,Ref } from "vue";
//获取路由中所有meta和title
const route = useRoute(); //获取的是当前路由
const tabs :Ref<RouteLocationMatched[]> = ref([])
const getBredcurm = () => {
  //过滤 拥有meta和title
  let mached = route.matched.filter((item) => item.meta && item.meta.title);
  const first = mached[0];
  if (first.path !== "/dashboard") {
    //不是 /dashboard ，就不是首页
    //构造一个（数组拼接）
    mached = [{ path: "/dashboard", meta: { title: "首页",chang:'home' } } as any].concat(
      mached
    );
  }
  tabs.value = mached;
};
getBredcurm();
// 监听路由发生变化,重新获取面包屑导航数据
watch(
  () => route.path,
  () => getBredcurm()
);
</script>

<style lang="scss" scoped>
</style>